// console.log(d3)
const dms = {
    width: 1000,
    height: 500,
    margin: {
        top: 50,
        left: 100,
        right: 100,
        bottom: 50
    }
}
dms.contentWidth = dms.width - dms.margin.left - dms.margin.right;
dms.contentHeight = dms.height - dms.margin.top - dms.margin.bottom;

const box = d3.select('.canvas').append('svg')
    .attr('id', 'box')
    .attr('width', dms.contentWidth)
    .attr('height', dms.contentHeight)

const content = box.append('g')
    .attr('id', 'content')
// .attr('transform', translate(dms.margin.left,dms.margin.top));
// .attr('transform', `translate(${dms.margin.left},${dms.margin.top})`);
// .attr('transform', `translate(40,-20)`);

const yesLine = content.append('g')
    .attr('id', 'yes-line')
    .attr('transform', `translate(40,-20)`);


function drawLineChart(dataset) {
    // console.log(dataset);
    const dateParse = d3.timeParse('%Y-%m-%d');
    const dateGet = d => dateParse(d.date)
    // const dateGet = d => d.date
    // console.log(dateGet(dataset[0]));
    const yesGet = d => d.yes
    const fangGet = d => d.fang
    const yiGet = d => d.yi

    const dateScale = d3.scaleTime()
        .domain(d3.extent(dataset, dateGet))
        .range([0, dms.contentWidth - dms.margin.left])
        .nice();
    // console.log(dateScale.domain())

    const yesScale = d3.scaleLinear()
        .domain(d3.extent(dataset, yesGet))
        .range([dms.contentHeight, 0])
        .nice();


    const fangScale = d3.scaleLinear()
        .domain(d3.extent(dataset, fangGet))
        .range([0, 20])
        .nice();

    const yiScale = d3.scaleLinear()
        .domain(d3.extent(dataset, yiGet))
        .range([0, dms.contentHeight / 2])
        .nice();
    // console.log(yesScale.range())

    // dataset.forEach(element => {
    //     content.append('circle')
    //         .attr('cx', dateScale(dateGet(element)))
    //         .attr('cy', yesScale(yesGet(element)))
    //         .attr('r', 10);
    //     // console.log(yesScale(yesGet(element)))
    // });


    yesLine.selectAll('circle')
        .data(dataset)
        .join('circle')
        .attr('cx', d => dateScale(dateGet(d)))
        .attr('cy', d => yesScale(yesGet(d)))
        .attr('r', 4);

    const lineGen = d3.line()
        .x(d => dateScale(dateGet(d)))
        .y(d => yesScale(yesGet(d)))
        .curve(d3.curveBasis);

    yesLine.append('path')
        .attr('d', lineGen(dataset));


    const dateAxisGen = d3.axisBottom()
        .scale(dateScale)
        .ticks(6, d3.timeFormat('%m-%d'));

    const yesAxisGen = d3.axisLeft()
        .scale(yesScale)
    // .ticks(4);


    const dateAxis = content.append('g')
        .attr('id', 'date-axis')
        .style('transform', `translate(40px,${dms.contentHeight - 20}px)`);
    dateAxis.call(dateAxisGen);

    dateAxis.append('text')
        .attr('id', 'date-title')
        .attr('x', dms.contentWidth - 70)
        .attr('y', 5)
        .style('fill', 'gray')
        .style('font-size', '12px')
        .style('letter-spacing', '5px')
        .text('日期')


    const yesAxis = content.append('g')
        .attr('id', 'yes-axis')
        .style('transform', `translate(40px,-20px)`);
    yesAxis.call(yesAxisGen);

    yesAxis.append('text')
        .attr('id', 'yes-title')
        .attr('x', 0)
        .attr('y', 0)
        .style('fill', 'gray')
        .style('font-size', '12px')
        .text('日期')


    const laserArea = content.append('g')
        .attr('id', 'laser-area')
        .style('transform', `translate(45px,20px)`)

    laserArea.selectAll('circle')
        .data(dataset)
        .join('circle')
        .attr('cx', d => dateScale(dateGet(d)))
        .attr('cy', 0)
        .attr('r', d => fangScale(fangGet(d)));



    const yiLine = content.append('g')
    .attr('id', 'yi-line')
    .style('transform', 'translate(45px,20px)')

    yiLine.selectAll('line').data(dataset).join('line')
    .attr('x1', d => dateScale(dateGet(d)))
    .attr('y1', 0)
    .attr('x2', d => dateScale(dateGet(d)))
    .attr('y2', d => yiScale(yiGet(d)))
    .attr('stroke','crimson')
    .attr('stroke-opacity','0.2')
    .attr('stroke-width','1.5px');

}

d3.json('sh_day.json')
    .then(drawLineChart);